<template>
  <div>
    <div class="centerBox">
      <div class="header">
        <div class="avatar"><img :src="userInfo.headImg" /></div>
        <div class="userInfo">
          <span class="name">{{ userInfo.name }}</span>
          <span v-if='userInfo.name' class="userType">普通用户</span>
          <span v-else class="userType" @click="$router.push(`/login?redirect=${$route.path}`)">去登录</span>
        </div>
        <div class="member">
          <div class="bgImg"></div>
          <div class="text">
            <span>Pro会员</span>
            <span>立即试用</span>
          </div>
        </div>
      </div>
      <div class="myMoney">我的资产</div>
      <ul class="moneyNav">
        <li class="moneyItem">
          <span class="num">￥0</span>
          <span class="text">余额</span>
        </li>
        <li class="moneyItem">
          <span class="num">0</span>
          <span class="text">红包</span>
        </li>
        <li class="moneyItem">
          <span class="num">0</span>
          <span class="text">优惠券</span>
        </li>
        <li class="moneyItem">
          <span class="num">￥0</span>
          <span class="text">津贴</span>
        </li>
        <li class="moneyItem">
          <span class="num">0</span>
          <span class="text">礼品卡</span>
        </li>
      </ul>
      <div class="null"></div>
      <van-grid class="btnList" :column-num="3">
        <van-grid-item class="btnItem" icon="description" text="我的订单" />
        <van-grid-item class="btnItem" icon="user-circle-o" text="账号管理" />
        <van-grid-item class="btnItem" icon="friends-o" text="我的手机号" />
        <van-grid-item class="btnItem" icon="calendar-o" text="周六一起拼" />
        <van-grid-item class="btnItem" icon="refund-o" text="售后服务" />
        <van-grid-item class="btnItem" icon="gift-card-o" text="邀请返利" />
        <van-grid-item class="btnItem" icon="bag-o" text="优先购" />
        <van-grid-item class="btnItem" icon="gold-coin-o" text="积分中心" />
        <van-grid-item class="btnItem" icon="manager-o" text="会员俱乐部" />
        <van-grid-item class="btnItem" icon="wap-home-o" text="地址管理" />
        <van-grid-item class="btnItem" icon="certificate" text="支付安全" />
        <van-grid-item class="btnItem" icon="user-o" text="办法组与客服" />
        <van-grid-item class="btnItem" icon="records" text="意见反馈" />
        <van-grid-item class="btnItem" icon="discount" text="我的竞拍" />
      </van-grid>
      <div v-if="userInfo.name" class="loginOut" @click="loginOut">退出登录</div>
    </div>

  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "Center",
  data() {
    return {};
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    // 退出登录
    async loginOut() {
      try {
        await this.$store.dispatch("userLoginOut");
        // alert('登陆成功')
        this.$toast.success("退出登录成功");
        this.$router.push("/home");
        // this.$forceUpdate();
        this.$bus.$emit("setActive", 0);
      } catch (error) {
        this.$toast.fail("退出登陆失败");
      }
    },
    getUserInfo() {
      this.$store.dispatch("getUserInfo");
    },
  },
  computed: {
    ...mapState({ userInfo: (state) => state.login.userInfo }),
  },
};
</script>

<style lang="less" scoped>
@grid-item-icon-size: 20px;
.centerBox {
  height: 840px;
  box-sizing: border-box;
  .header {
    width: 100%;
    height: 135px;
    background-image: url("~@/pages/Center/images/bg.png");
    background-size: cover;
    display: flex;
    align-items: center;
    padding: 0 20px;
    position: relative;
    .avatar {
      width: 70px;
      height: 70px;
      background-image: url("~@/pages/Center/images/avatar.png");
      background-size: cover;
      border-radius: 50%;
      margin-right: 20px;
      img {
        width: 70px;
        height: 70px;
        border-radius: 50%;
      }
    }
    .userInfo {
      color: #fff;
      font-size: 18px;
      display: flex;
      flex-direction: column;
      .userType {
        font-size: 14px;
        margin-top: 10px;
      }
    }
    .member {
      position: absolute;
      display: flex;
      top: 70px;
      right: 0;
      width: 130px;
      height: 43px;
      border-radius: 30px 0 0 30px;
      align-items: center;
      background-image: linear-gradient(#564d43, #0f0f0f);
      .bgImg {
        width: 30px;
        height: 20px;
        background-image: url("~@/pages/Center/images/sprite.png");
        background-position-y: -35px;
        background-size: 100%;
        margin-left: 5px;
      }
      .text {
        height: 70%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        font-size: 13px;
        color: #f9e0c0;
      }
    }
  }
  .myMoney {
    margin: 0 15px;
    height: 50px;
    border-bottom: 1px solid #dfdfdf;
    width: 100%;
    line-height: 50px;
    font-size: 14px;
  }
  .moneyNav {
    width: 100%;
    height: 80px;
    display: flex;
    // background: violet;
    justify-content: space-around;
    align-items: center;
    .moneyItem {
      display: flex;
      flex-direction: column;
      text-align: center;
      .num {
        font-size: 16px;
        font-weight: bolder;
      }
      .text {
        font-size: 13px;
        margin-top: 10px;
      }
    }
  }
  .null {
    content: "";
    width: 100%;
    height: 10px;
    background: #f4f4f4;
    display: block;
  }
  .btnList {
    .btnItem {
      border-bottom: 1px solid #e3e3e3;
      border-right: 1px solid #e3e3e3;
    }
  }
  .loginOut {
    height: 70px;
    width: 100%;
    text-align: center;
    line-height: 50px;
    font-size: 15px;
    background: #fff;
    &::before {
      content: "";
      display: block;
      background: #eeeeee;
      height: 20px;
    }
    &::after {
      content: "";
      display: block;
      background: #eeeeee;
      height: 10px;
    }
  }
}
</style>

